<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选</title>
</head>
<body>
    <ul id="list">
       <li><label for=""><input type="checkbox" value="1">我是第一个</label></li>
       <li><label for=""><input type="checkbox" value="2">我是第二个</label></li>
       <li><label for=""><input type="checkbox" value="3">我是第三个</label></li>
       <li><label for=""><input type="checkbox" value="4">我是第四个</label></li>
       <li><label for=""><input type="checkbox" value="5">我是第五个</label></li>
       <li><label for=""><input type="checkbox" value="6">我是第六个</label></li>
    </ul>
    <input type="checkbox" id="all">
    <input type="button" value="全选" class="btn" id="selectAll">
    <input type="button" value="全不选" class="btn" id="unSelect">
    <input type="button" value="反选" class="btn" id="reverse">
    <input type="button" value="获得选中的所有值" class="btn" id="getValue">
</body>
<script src="jquery.min.js"></script>
<script>
    $(function () {
        $('#all').click(function(){
            console.log(this.checked)
            if(this.checked){
                $('#list :checkbox').prop('checked',true)
            }else{
                $('#list :checkbox').prop('checked',false)
            }
        })
        $('#unSelect').click(function(){
            $('#list :checkbox,#all').attr('checked',false)
        })
        $('#reverse').click(function(){
            $('#list :checkbox').each(function () {
                $(this).prop('checked')?$(this).prop('checked',false):$(this).prop('checked',true)
            })
            allchk()
        })
        $('#list :checkbox').click(function () {
            allchk()
        })
        function allchk(){
            var num = $('#list :checkbox').size()
            var m=0
            $('#list :checkbox').each(function () {
                if($(this).prop('checked')){
                    m++
                }
                if(m == num){
                    $('#all').prop('checked',true)
                }else{
                    $('#all').prop('checked',false)
                }
            })

        }
//        获取选中的所有的值
        $('#getValue').click(function () {
            var valArr = new Array;
            var str = ''
            $('#list :checkbox:checked').each(function(i){
                valArr[i] = $(this).val()
//                str += $(this).val() + ','
            })
            console.log(valArr)
//            console.log(str)
//            var vals = valArr.join(',')
//            console.log(vals)

        })
    })

</script>
</html>